<template>
	<view class="center">
		<view class="bg center">
			<text class="compnay">中移互联网有限公司</text>
			<view class="banner">
				<image src="@/static/work/work.png"></image>
			</view>
		</view>
		<view class="center-nav margin-top">
			<view class="center-nav-content">
				<view class="center-nav-item" v-for="(nav, index) in navs" :key="index">
					<image :src="'../../static/work/'+nav.icon+'.png'"></image>
					<text class="center-nav-item-text">{{ nav.text }}</text>
				</view>
			</view>
		</view>

		<view class="center-list">
			<view class="center-nav-title">
				<text>团队通信</text>
			</view>
			<view class="center-list-content">
				<view class="center-content-item" v-for="(nav,index) in tongxin">
					<text class="center-content-item-icon" :class="nav.class"> {{ nav.icon  }} </text>
					<view class="center-content-item-info">
						<text class="center-content-item-text">{{nav.text}}</text>
						<text class="center-content-item-desc">{{nav.desc}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="center-list">
			<view class="center-nav-title">
				<text>移动办公</text>
			</view>
			<view class="center-list-content">
				<view class="center-content-item" v-for="(nav,index) in bangong">
					<text class="center-content-item-icon" :class="nav.class"> {{ nav.icon  }} </text>
					<view class="center-content-item-info">
						<text class="center-content-item-text">{{nav.text}}</text>
						<text class="center-content-item-desc">{{nav.desc}}</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				navs: [{
						icon: "icon1",
						text: '应用商城'
					},
					{
						icon: "icon2",
						text: '应用管理'
					},
					{
						icon: "icon3",
						text: '咨询客服'
					},
					{
						icon: "icon4",
						text: '创建团队'
					}
				],
				tongxin: [{
						icon: "\u{e609}",
						text: '企业通讯录',
						desc: '所有部门通讯名单',
						class: 'color-1'
					},
					{
						icon: "\u{e62f}",
						text: '超级会议',
						desc: '多人视频通话会议',
						class: 'color-3'
					},
					{
						icon: "\u{e607}",
						text: '群发信使',
						desc: '一千条群发短信',
						class: 'color-2'
					},
					{
						icon: '\u{e64d}', //原代码：&#xe60a;
						text: '139邮箱',
						desc: '汇集所有邮件信息',
						class: 'color-4'
					}
				],
				bangong: [{
						icon: "\u{e60f}",
						text: '考勤打卡',
						desc: '精准定位考勤签到',
						class: 'color-2'
					},
					{
						icon: "\u{e654}",
						text: '审批',
						desc: '一键批量处理',
						class: 'color-3'
					},
					{
						icon: "\u{e635}",
						text: '日志',
						desc: '工作项目内容汇报',
						class: 'color-4'
					},
					{
						icon: '\u{e615}', //原代码：&#xe60a;
						text: '企业活动',
						desc: '企业最新活动发布',
						class: 'color-1'
					}
				]
			}
		},
		methods: {
			goLogin() {
				if (!this.login) {
					console.log("点击前往登录")
				}
			}
		}
	}
</script>

<style>
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/c/font_4366421_k5i3ya8nfw.ttf?t=1702189086737') format('truetype');
	}

	page,
	view {
		display: flex;
	}

	page {
		background-color: #fff;
	}

	.center {
		flex-direction: column;
	}
</style>
<style lang="scss" scoped>
	$head-color: #5b8cff; //5b8cff 4194fc
	$white-color: #fff;
	$radius: 5rpx;
	$border-color: #efefef;
	$color-1: #6eacfe;
	$color-2: #52f0cf;
	$color-3: #ffcd46;
	$color-4: #ff727d;
	$list-item-height: 100rpx;
	$list-margin: 15rpx;

	.bg {
		background-image: linear-gradient(#5b8cff, #4194fc);
		min-height: 550rpx;
		border-bottom-left-radius: 30%;
		border-bottom-right-radius: 30%;

		.compnay {
			width: calc(100vw - 80rpx);
			margin: 0 auto 30rpx;
			font-size: 38rpx;
			color: #fff;
			font-weight: 400;
		}

		.banner {
			width: 100vw;
			height: 270rpx;
			box-sizing: border-box;
			flex-direction: row;
			align-items: center;

			image {
				width: calc(100vw - 80rpx);
				margin: 0 auto;
				height: 270rpx;
				border-radius: 20rpx;
			}
		}
	}

	.center-list {
		background-color: #FFFFFF;
		margin: 0 auto 0;
		padding-bottom: $list-margin ;
		width: calc(100vw - 0rpx);
		flex-direction: column;
		border-radius: $radius;
	}

	.center-nav {
		background-color: #FFFFFF;
		margin: 0rpx auto 50rpx;
		width: calc(100vw - 80rpx);
		flex-direction: column;
		border-radius: $radius;
		box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
	}

	.center-nav-title {
		padding: 25rpx 40rpx 0rpx;
		font-size: 34rpx;
		color: #333;
		font-weight: 400;
	}

	.center-nav-content {
		display: flex;
		align-items: center;
		padding: 30rpx 20rpx;
		box-sizing: border-box;

		.center-nav-item {
			flex-direction: column;
			flex: 1;
			text-align: center;

			image {
				width: 104rpx;
				height: 105rpx;
				margin: 0 auto;
			}

			.center-nav-item-icon {
				color: #333;
				font-size: 48rpx;
				font-weight: 500;
				font-family: texticons;
			}

			.center-nav-item-text {
				color: #666;
				font-size: 30rpx;
				font-weight: 400;
				margin-top: 5rpx;
			}
		}
	}

	.center-list-content {
		box-sizing: border-box;
		padding: 25rpx 40rpx;
		flex-wrap: wrap;

		.center-content-item {
			width: 50%;
			box-sizing: border-box;
			padding: 25rpx 0rpx;
			align-items: center;

			.center-content-item-icon {
				color: #fff;
				font-size: 48rpx;
				font-weight: 500;
				font-family: texticons;
				border-radius: 20rpx;
				padding: 20rpx;
			}

			.center-content-item-info {
				flex-direction: column;
				margin-left: 20rpx;

				.center-content-item-text {
					color: #666;
					font-size: 32rpx;
					font-weight: 400;
				}

				.center-content-item-desc {
					color: #888;
					font-size: 24rpx;
					font-weight: 400;
					margin-top: 10rpx;
				}
			}
		}
	}

	.margin-top {
		margin-top: -160rpx;
	}

	.color-1 {
		background-image: linear-gradient(#72aefe, #4896ff);
	}

	.color-2 {
		background-image: linear-gradient(#5ff9d7, #39debd);
	}

	.color-3 {
		background-image: linear-gradient(#ffd155, #ffbc04);
	}

	.color-4 {
		background-image: linear-gradient(#ff808b, #ff6872);
	}
</style>